<template>
	<view class="container">
		<view>
			<StatusNavList ref="status_nav"  @tabClick="tabClick()"></StatusNavList>
			<view class="search-v" v-if="cc_index==0">
				<view @click="toSearch()"
					style="display: flex;    width: 100%;    border: 1px solid #e4e4e4;    border-radius: 10rpx;padding-left: 20rpx;">
					<text class="cell-icon yticon icon-sousuo"
						style="height: 68rpx;line-height: 68rpx;float: left;width: 40rpx;"></text>
					<!-- <input class="search-input"  placeholder="请输入搜索关键词"/> -->
					<view class="search-input">请输入感兴趣的内容、夜校名</view>
				</view>
			<!-- 	<view class="filter" @click="clickFilter()"><text class="cell-icon yticon icon-filter"
						:class="shaiXuan"></text></view> -->
			</view>
			<shai-xuan v-if="show_mask&&cc_index==0"
				style="background:#ffffff;position:fixed;z-index:2;height:740rpx;overflow:auto"></shai-xuan>
				
			<view v-if="cc_index==1" class="flex-container">
				<view class="left-aligned">
					<view>
						<picker mode="date" fields="month"  @change="bindDateChange" >
							<view class="uni-input" style="float: left;">{{year}}年{{selectMonth}}月</view>
							<text class="cell-icon yticon icon-xia"></text>
						</picker>
						
					</view>
		
				</view>
				
			</view>
				<!-- <view v-if="cc_index==1" class="gundong">
				<view  v-for="(item, index) in month_list" :key="index" class="course_tab"
					@click="clickTabCourse(item.val,index)" :class="{current: secondCurrentIndex === index}" >
					<view class="course_t">{{item.title}}</view>
					<view class="course_c">{{item.content}}</view>
				</view>
				</view> -->
				<view class="month_c">
					<scroll-view v-if="cc_index==1"  :scroll-with-animation="show_scrollbar" scroll-x style="white-space: nowrap;" :scroll-left="s_left">
						<view  v-for="(item, index) in month_list" :key="index" class="course_tab2" 	@click="clickTabCourse(item.val,index)" :class="{current: secondCurrentIndex === index}" >
							<view class="course_t">{{item.title}}</view>
							<view class="course_c">{{item.content}}</view>
						</view>
					</scroll-view>
				</view>
				
			
				
		</view>

		<view v-if="cc_index==0" class="bottom-box">
			<view class="swiper-list">
				
				<uv-swiper :list="swiper_list" height="200" @click="toPlay" keyName="discover"
				 indicator
				 indicatorMode="line"
				 circular    showTitle :title-style="{color:'white',textAlign: 'left',paddingBottom:'20rpx',paddingLeft:'40rpx',background:'none',bottom:'50rpx'}">
					
				</uv-swiper>
				<!-- <swiper class="swiper" circular :indicator-dots="true"  :autoplay="true" :interval="3000"	:duration="500">
					<swiper-item v-for="(item,index) in swiper_list" :key="index">
						<view >
							<image :src="item.discover" class="swiper-image" ></image>
						</view>
						<text style="position: absolute;bottom: 60rpx;left: 50rpx;color: #FFFFFF">{{item.title}}</text>
					</swiper-item>
				
				</swiper> -->
				<view class="rec-tag">互动视频</view>
				<text class="cell-icon yticon icon-player player_btn"></text>
				
			</view>
			<view v-if="loaded&&list.length==0" class="empty_data">暂无数据</view>
			<scroll-view v-else class="list-scroll-content" scroll-y @scrolltolower="getList" :style="{'opacity':s_opacity}">
				<view class="test">
					<water-fall ref="waterfallFlow" offset="28rpx" :list="list" @load="waterfallFlowLoad">
						<template v-slot:left="{leftList}">
							<view class="item-warter" v-for="(item, index) in leftList" :key="index"
								@click="e => clickItem(item)">
								<view class="image-text">
									<video v-if="item.video_url!=''" :src="item.video_url" :show-center-play-btn="false" :controls="false" style="width: 100%;height: 188rpx;border-radius: 20rpx;"></video>
									<image v-else mode="widthFix" class="big_image" :src="item.pics[0]" lazy-load="true"></image>
									
									<text v-if="item.video_url!=''" class="cell-icon yticon icon-player player_btn"></text>
								</view>
								<view class="user-info">
									<image class="small-image" :src="item.logo"></image>
									<view style="display: flex;flex: 1;">
										<view class="campus-name">{{item.campus_name}}</view>
										<view style="display: flex;margin-left: 10rpx;align-items: center;"><text class="cell-icon yticon icon-eye"></text><text class="eye-name">{{item.read_num}}</text></view>
									</view>
								</view>
								<view class="text-break-all">{{ item.title }}</view>
								<!-- <view class="coin-info">
									<view class="coin-detail">
										<view class="coin-num">{{item.score}}</view>
										<view class="coin-title">积分</view>
									</view>
									<view class="read-num">{{item.read_num}}人看过</view>
								</view> -->
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="item-warter" v-for="(item, index) in rightList" :key="index"
								@click="e => clickItem(item)">
								<view class="image-text">
									<video v-if="item.video_url!=''" :src="item.video_url" :show-center-play-btn="false" :controls="false" style="width: 100%;height: 188rpx;border-radius: 20rpx;"></video>
									<image v-else mode="widthFix" class="big_image" :src="item.pics[0]" lazy-load="true"></image>
									

									<text v-if="item.video_url!=''" class="cell-icon yticon icon-player player_btn"></text>
								</view>
								<view class="user-info">
									<image class="small-image" :src="item.logo"></image>
									<view style="display: flex;flex:1">
										<view class="campus-name">{{item.campus_name}}</view>
										<view style="display: flex;margin-left: 10rpx;align-items: center;"><text class="cell-icon yticon icon-eye"></text><text class="eye-name">{{item.read_num}}</text></view>
									</view>
								</view>
								<view class="text-break-all">{{ item.title }}</view>
								<!-- <view class="coin-info">
									<view class="coin-detail">
										<view class="coin-num">{{item.score}}</view>
										<view class="coin-title">积分</view>
									</view>
									<view class="read-num">{{item.read_num}}人看过</view>
								</view> -->
							</view>
						</template>
					</water-fall>
				</view>
			</scroll-view>
		</view>

		<view v-if="cc_index==1" class="roll list-content" :style="{'background':hasRoll}">
			<!-- <view class="course_content" v-if="course_list.length==0">暂无数据</view> -->
			<view v-if="loaded2&&course_list.length==0" class="empty_data">暂无数据</view>
			<!-- <view v-else class="list-content"> -->
				<scroll-view  v-else scroll-y @scrolltolower="loadMonthCourse" style="height: 1080rpx;">
				<view class="list-item" v-for="(item, index) in course_list" :key="index" @click="toDetailText(item.id)">
					<view class="list-img">
						<view class="status-tag" :style="{background: item.background}">{{item.status_tag}}</view>
						<image :src="item.discover"></image>
					</view>
					<view class="list-title">
						<view class="list-title-name">{{item.name}}</view>
						<view class="list-detail">
							<view style="flex: 1;">共{{item.course_section_info_count}}节</view>
							<view class="pad-r22">距您{{item.distance}}</view>
						</view>
						<view class="list-date">开课日期:{{item.course_time}}</view>
						<view class="list-op">
							<view class="font-w600">{{item.price}}</view>
							<view class="sign-coin-detail">
								签到最高可领{{item.score}}积分</view>
						</view>
					</view>
				</view>

			</scroll-view>
			<!-- </view> -->

		</view>


	</view>
</template>
<!-- 自定义一些组件测试 -->
<script>
	// import DiyNav from "@/components/diy-nav-back"
	import StatusNavList from "@/components/status-nav-list"
	import Search from "@/components/search"
	import WaterFall from "@/components/waterfall"
	import ShaiXuan from '@/components/shaixuan'
	import Api from '@/common/api'
	export default {
		components: {
			// DiyNav,
			StatusNavList,
			Search,
			WaterFall,
			ShaiXuan
		},
		data() {
			return {
				show_scrollbar:false,
				index:0,
				shaixuan: '',
				list: [], // PS: 直接写死在这里瀑布流并不会渲染，因为内部是watch监听渲染的，需要在其他地方被赋值，如onLoad
				count: 0,
				page: 1,
				size: 8,
				page2: 1,
				size2: 4,
				show_mask: false,
				s_opacity: 1,
				more_data: true,
				more_data_month: true,
				cc_index: 0,
				tabCurrentIndex: 0,
				month_list: [],
				secondCurrentIndex:0,
				course_list: [],
				hasRoll: '',
				selectMonth:0,
				array:[],
				loaded:false,
				loaded2:false,
				lat:'',
				lng:'',
				year:'',
				swiper_list:[],
				s_left:0
			}
		},

		onLoad() {
			let loc = uni.getStorageSync('loc');
			if(loc!=''){
				this.lat = loc.lat;
				this.lng = loc.lng;
			}
			
			this.initDateData();
			this.getList();
			
			this.getSwiperList();
		},
		onShow(){
			let p_index= uni.getStorageSync('tab_index');
			if(p_index){
				console.log(p_index,666)
				this.$refs.status_nav.tabClick(p_index)
				uni.removeStorageSync('tab_index')
			
			}
			
		},
		beforeCreate() {

		},
		beforeDestroy() {


		},
		// 下拉刷新
		onPullDownRefresh() {
			this.list = [];
			/** 
			 * 数据被置空时，this.$refs.waterfallFlow.clear()方法是必须要调的
			 * 如果是强制渲染的场景请使用this.$refs.waterfallFlow.update(), 例如排序
			 * */
			this.$refs.waterfallFlow.clear();

			setTimeout(() => {
				this.getList();
				uni.stopPullDownRefresh();
			}, 500);
		},

		methods: {
			bindDateChange(e){
				
				let temp = e.detail.value.split('-');
				this.year = temp[0];
				this.selectMonth = temp[1];
				this.recaculateLeft();
				// 以下是复制的
				this.course_list=[];
				this.hasRoll ='#FFFFFF';
				
				this.more_data_month=true;
				this.page2=1;
				this.loadData1();
			},
			toPlay(e){
				uni.navigateTo({
					url:'/pages/course/detail?id='+this.swiper_list[e].id+"&t=1"
				})
			},
			recaculateLeft(){
				this.s_left=117*this.selectMonth;
			},
			initDateData(){
				let now = new Date();
				this.year=now.getFullYear();
				this.selectMonth  = now.getMonth() + 1; // 月份从0开始，所以要加1
				this.recaculateLeft();
				this.loadData1();
			},
			// 加载月或周统计列表
			async loadData1(){
				
				let params={
						t:'m',
						mon:this.selectMonth,
						y:this.year
					};
				// console.log(params.t,'值',params.mon)
				let data = await Api.apiCall('get', Api.apiName.month_or_week, params);
				if (!data) { //出错时
					return;
				}
				this.month_list = data.data;
				let k = this.month_list.findIndex(obj => obj.val == this.selectMonth);		
				this.secondCurrentIndex = k;
				this.loadMonthCourse()
			},
			
			tabClick() {
				
				this.cc_index = this.cc_index == 1 ? 0 : 1;
				if (this.cc_index == 1&&this.month_list.length>0) {
					this.hasRoll = '#FFFFFF';
					
				}
			},
			clickFilter() {
				this.shaixuan = this.shaixuan == 'sx' ? '' : 'sx';
				this.show_mask = !this.show_mask;
				this.s_opacity = this.show_mask ? 0.7 : 1;
				console.log(this.shaixuan)
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/public/search?lat='+this.lat+'&lng='+this.lng
				})
			},
			async getSwiperList() {
			
				let params = {
					page: 1,
					size: 3,
				}
				let data = await Api.apiCall('get', Api.apiName.swiper_list, params, true);
				if (!data || data.data.length == 0) {
					return;
				}
				this.swiper_list = data.data;
			},
			//获取瀑布流列表
			async getList() {

				if (!this.more_data) {
					return;
				}
				
				let params = {
					page: this.page,
					size: this.size,
					lat:this.lat,
					lng:this.lng
				}
				let data = await Api.apiCall('get', Api.apiName.recommend_water, params, true);
				if (!data || data.data.list.length == 0) {
					this.loaded =true;
					return;
				}
				this.list = this.list.concat(data.data.list);
				this.loaded =true;
				if (data.data.list.length > 0 && data.data.list.length == this.size) {
					this.page++;
					this.more_data = true;
					return;
				}
				this.more_data = false;


			},
			// 元素项被点击
		   async clickItem(item) {
			   uni.navigateTo({
					url: '/pages/course/detail?id=' + item.id+"&t=2"
			   })
			   return;
				// 可做页面跳转等
				// if(item.discover==''){
				// 	uni.navigateTo({
				// 		url: '/pages/course/detail?id=' + item.id+"&t=2"
				// 	})
				// }else{
				// 	uni.previewImage({
				// 		urls:[item.discover]
				// 	});
				// 	await Api.apiCall('get', Api.apiName.normal_detail, {r_id: item.id}, true);
				// }
				
			},
			toDetailText(id) {
				// 可做页面跳转等
				// console.log("点击了：", id);
				uni.navigateTo({
					url: '/pages/course/detail_text?id=' + id
				})
			},
			// 瀑布流列表渲染完毕
			waterfallFlowLoad(event) {
				// console.log("渲染完成：", event);
			},
			// 加载列表数据
			async loadMonthCourse() {
				if (!this.more_data_month) {
					return; //没有数据不请求
				}
				this.loaded2=false;
				let params = {
					page: this.page2,
					size: this.size2,
					t:this.tabCurrentIndex==0?'m':'w',
					mon:this.selectMonth,
					y:this.year,
					lat:this.lat,
					lng:this.lng
				};
				let data = await Api.apiCall('get', Api.apiName.course_date_list, params);
				if (!data || data.data.length==0) { //出错时
					this.loaded2 = true;
					this.more_data_month = false;
					return;
				}
				
				setTimeout(() => {
					this.course_list = this.course_list.concat(data.data)
					// this.loaded2 = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size2) {
						this.page2++;
						this.hasRoll = '#F6F6F6';
						// console.log('more')
					} else {
						this.more_data_month = false;
						// console.log('no more')
					}

				}, 600);
			},
			clickTabCourse(val,index) {
				this.page2=1;
				this.more_data_month=true;
				this.course_list =[];
				this.hasRoll ='#FFFFFF';
				if(this.tabCurrentIndex==0){
					this.selectMonth = val;
					this.secondCurrentIndex=index;
					this.index =index;
				}
				this.loadMonthCourse();
			},
		
		},


	}
</script>

<style lang="scss" scoped>
	page {
		// background: #000000;

	}

	.search-v {
		padding: 0rpx 20rpx;
		// margin: 20rpx;
		height: 66rpx;
		// border-radius: 10rpx;
		// border: 1px solid #e4e4e4;
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.search-input {
		height: 64rpx;
		color: rgba(38, 38, 38, 0.5);
		// text-align: left;
		font-size: 14px;
		// transition: color 0.24s;
		// float: left;
		// width: 93%;
		line-height: 64rpx;
	}

	.container {
		// position: relative;
		// width: 100%;
		// height: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.gundong{
		display: flex;
		overflow-x: scroll;
		height: 110rpx;
		white-space: nowrap;
	}

	.gundong::-webkit-scrollbar {
		display: none;
	}
	.month_c{
		font-weight: 100;
	}
	.month_c::-webkit-scrollbar {
		display: none !important;
	}

	.uni-searchbar__box {
		border: 1px solid rgba(204, 204, 204, 0.5);
	}

	.list-scroll-content {
		height: 100%;
		// position:fixed;
		z-index: 1;
		margin-top:20rpx;
	}
	.list-scroll-content::-webkit-scrollbar {
		display: none;
	}

	.item-warter {
		width: 100%;
		height: auto;
		/* background-color: #ffaaff; */
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 10rpx;
	}

	/* PS: 快手小程序不支持该选择器，在template中用js判断加上边距 */
	.item-warter:nth-child(n+2) {
		margin-top: 40rpx;
	}


	.big_image {
		width: 100%;
		border-radius: 20rpx;
	}

	.text-break-all {
		word-break: break-all;
		font-size: 14px;
		margin-top: 22rpx;
		font-weight: 800;
		padding-left: 10rpx;
	}

	.image-text {
		position: relative;
	}

	.player_btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.small-image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1px solid #ccc;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.campus-name {
		margin-left: 10rpx;
		font-size: 12px;
		display: flex;
		flex: 1;
	}

	.coin-title {
		font-size: 22rpx;
		margin-top: auto;
		margin-left: 10rpx;
	}

	.coin-info {
		display: flex;
		justify-content: space-between;
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.coin-detail {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #3085AD;
	}

	.read-num {
		margin-left: auto;
		color: #999999;
		font-size: 12px;
	}

	.coin-num {
		font-size: 32rpx;
		font-weight: 600;
	}

	.bottom-box {
		flex: 1;
		width: 100%;
		overflow-y: auto;
	}

	.filter {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.roll {
		// height: 100%;
		flex:1;
		// overflow-y: auto;
	}

	.flex-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-aligned,
	.right-aligned {
		display: flex;
		align-items: center;
		margin: 30rpx;
	}

	.month {
		margin-left: 20rpx;
	}

	.tab_change {
		width: 110rpx;
		text-align: center;
		font-size: 28rpx;
		height: 48rpx;
		line-height: 48rpx;

		&.current {
			background: #FFFFFF;
			border-radius: 8rpx;
		}
	}

	.course_tab {
		// height: 120rpx;
		// width: 190rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		// display: inline-block;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFFF;
		font-size: 32rpx;
		margin: 0rpx 20rpx;
		padding: 13rpx 40rpx;
		&.current {
			background: #0191FF;
			color:#FFFFFF;
		}
	}
	
	.course_tab2 {
		width: 234rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		display: inline-block;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFFF;
		font-size: 32rpx;
		margin: 0rpx 20rpx;
		padding: 13rpx 40rpx;
		&.current {
			background: #0191FF;
			color:#FFFFFF;
		}
	}
	.course_tab2::-webkit-scrollbar {
		display: none !important;
	}

	.course_t {
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
	}

	.course_c {
		margin-top: 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
	}

	.course_content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: #b1abab
	}

	.list-content {
		padding: 4rpx;
		margin-top: 32rpx;
	}
	.list-content::-webkit-scrollbar {
		display: none;
	}

	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 12rpx;
		border-radius: 20rpx;
	}

	.list-img {
		padding: 20rpx;
		position: relative;
		image {
			width: 252rpx;
			height: 252rpx;
			border-radius: 20rpx;
		}
	}
	.status-tag{
		position: absolute;
		z-index: 2;
		bottom: 30rpx;
		background: rgba(0 ,0, 0,0.5);
		width: 252rpx;
		text-align: center;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		color:#FFFFFF;
	}
	.list-title {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		width: 100%;
	}

	.list-title-name {
		font-size: 30rpx;
		font-weight: 600
	}

	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}

	.list-date {
		color: #999999;
		margin-top: 24rpx
	}

	.list-op {
		margin-top: 30rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 22rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.empty_data{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		opacity: 0.5;
		color: #999;
	}
	image{will-change: transform}
	.swiper-list{
		height: 448rpx;
		position: relative;
		margin: 0rpx 20rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}
	.swiper{
		height: 100%;
	}
	.swiper-image{
		height: 448rpx;
		width: 100%;
		border-radius: 20rpx;
	}
	.rec-tag{
		position: absolute;
		right: 0px;
		width: 80px;
		top: 0px;
		background: #0191FF;
		padding: 10rpx;
		font-size: 24rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 20rpx;
	}
	.eye-name{
		font-size: 22rpx;
		color:#ccc
	}
	.indicator {
		display: flex;
		flex-direction: row;
		justify-content: center;
	
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
</style>